<template>
	<div class="order">
		<cl-crud @load="onLoad">
			<template #slot-layout-top>
				<wechartCount ref="commission-count"></wechartCount>
			</template>
			<template #slot-datepicker>
				<div class="_top-filter">
					<div style="width:125px;">
						<el-select
							size="mini"
							class="time-type"
							v-model="selects.timeType"
							@change="val => refresh({ timeType: val, page: 1, sort: 'desc' })"
						>
							<el-option label="创建时间" :value="0"></el-option>
							<el-option label="付款时间" :value="1"></el-option>
							<el-option label="结算时间" :value="2"></el-option>
						</el-select>
					</div>
					<div style="width:350px;">
						<date-picker
							style="width:350px;"
							:datas="datas"
							@change="
								val => refresh({ startTime: val[0], endTime: val[1], page: 1 })
							"
							@refresh="refresh({ startTime: '', endTime: '', page: 1 })"
						></date-picker>
					</div>
					<div>
						<select-taobao
							class="selects"
							v-model="selects.pid"
							@change="val => taobaoIdrefresh({ taobaoId: val, page: 1 })"
						></select-taobao>
					</div>
					<div>
						<select-adzone
							class="selects"
							ref="promotion"
							v-model="selects.positionId"
							@change="val => refresh({ positionId: val, page: 1 })"
						></select-adzone>
					</div>
					<div>
						<select-staff
							class="selects"
							v-model="selects.staffId"
							@change="val => refresh({ staffId: val, page: 1 })"
						></select-staff>
					</div>
					<div>
						<el-button
							@click="Export"
							v-permission="'crm:order:positionExport'"
							type="primary"
							style="margin-left:10px"
							size="mini"
							><i class="el-icon-download"></i>导出报表</el-button
						>
					</div>
				</div>
			</template>
			<template #table-column-salesRate="{scope}">
				<div :class="scope.row.salesStatus == 1 ? 'sales-top' : 'sales-bottom'">
					<span>{{ scope.row.salesRate }}%</span>
					<i class="el-icon-bottom" v-if="!scope.row.salesStatus"></i>
					<i class="el-icon-top" v-else></i>
				</div>
			</template>
			<template #table-column-validCommission="{scope}">
				<div>
					{{ scope.row.validCommission.toFixed(2) }}
				</div>
			</template>
			<template #table-column-tkStatus="{scope}">
				<el-tag size="small" type="warning" v-if="scope.row.tkStatus == 3">订单结算</el-tag>
				<el-tag size="small" v-if="scope.row.tkStatus == 12">订单付款</el-tag>
				<el-tag size="small" type="info" v-if="scope.row.tkStatus == 13">订单失效</el-tag>
				<el-tag size="small" type="success" v-if="scope.row.tkStatus == 14"
					>订单成功</el-tag
				>
			</template>
		</cl-crud>
	</div>
</template>
<script>
import wechartCount from './components/wechart-count';
import DatePicker from '@/components/order/date-picker';
import SelectTaobao from '@/components/order/select-taobao';
import SelectAdzone from '@/components/order/select-adzone';
import SelectStaff from '@/components/order/select-staff';
import moment from 'moment';
import { dateFormat, download } from '@/utils/index';
export default {
	data() {
		return {
			crud: null,
			selects: {
				timeType: 0,
				pid: '',
				positionId: '',
				staffId: '',
				tkStatus: ''
			},
			datas: [this.$route.query.startTime, this.$route.query.endTime],
			params: {
				startTime: this.$route.query.startTime,
				endTime: this.$route.query.endTime
			}
		};
	},
	components: {
		wechartCount,
		DatePicker,
		SelectTaobao,
		SelectAdzone,
		SelectStaff
	},
	methods: {
		onLoad({ ctx, app }) {
			this.crud = app;
			ctx.service(this.$service.order)
				.set('dict', {
					api: {
						list: 'list', // 全部数据
						add: 'add', // 新增
						update: 'update', // 修改
						delete: 'delete', // 删除
						info: 'info', // 详情
						page: 'wechatStatistics' // 分页
					},
					search: {
						query: 'salesStatus'
					}
				})
				.set('table', {
					props: {
						'default-sort': {
							order: 'descending',
							prop: 'validCommission'
						}
					},
					columns: [
						{
							type: 'index',
							align: 'center',
							label: '序号',
							width: 80
						},
						{
							label: '微信编号',
							prop: 'label',
							align: 'center'
						},
						{
							label: '推广位ID',
							prop: 'adzoneId',
							align: 'center'
						},
						{
							label: '推广位名称',
							prop: 'positionName',
							align: 'center'
						},
						{
							label: '粉丝总数',
							prop: 'fansNum',
							align: 'center',
							emptyText: '0',
							sortable: true
						},
						{
							label: 'A类总数',
							prop: 'aTypeNum',
							align: 'center',
							emptyText: '0',
							sortable: true
						},
						{
							label: '有效佣金',
							prop: 'validCommission',
							align: 'center',
							emptyText: '0',
							sortable: true
						},
						{
							label: '有效订单数',
							prop: 'validOrderNum',
							align: 'center',
							emptyText: '0',
							sortable: true
						}
					],
					op: {
						visible: false
					}
				})
				.set('search', {
					key: {
						placeholder: '请输入微信编号'
					}
				})
				.set('layout', [
					['refresh-btn', 'slot-datepicker', 'flex1', 'search-key'],
					['slot-layout-top'],
					['data-table'],
					['flex1', 'pagination']
				])
				.on('refresh', async (params, { next }) => {
					const { subData } = await next(params);
					this.$refs['commission-count'].refresh(subData);
				})
				.done();
			if (!(this.params.startTime && this.params.endTime)) {
				this.params = {
					...this.params,
					...dateFormat(0)
				};
			}
			app.refresh({
				...this.params,
				sort: 'desc',
				timeType: 0
			});
		},
		taobaoIdrefresh(params) {
			if (params.taobaoId) {
				this.selects.positionId = '';
				this.$refs['promotion'].refresh({
					taobaoId: params.taobaoId
				});
			} else {
				this.selects.positionId = '';
				this.$refs['promotion'].refresh({
					taobaoId: ''
				});
			}
			this.refresh({ ...params, positionId: '' });
		},
		refresh(params) {
			if (params.startTime) {
				this.params = {
					...params
				};
			}
			if (params.timeType == 0) {
				params.prop = 'tkCreateTime';
			} else if (params.timeType == 1) {
				params.prop = 'tkPaidTime';
			} else if (params.timeType == 2) {
				params.prop = 'tkEarningTime';
			}
			this.crud.refresh(params);
		},
		// 导出报表
		Export() {
			this.$service.order
				.wechatExport(this.params)
				.then(res => {
					download({
						data: res,
						fileName: `微信号统计-${moment().format('YYYY-MM-DD HH:mm:ss')}`
					});
				})
				.catch(err => console.error(err));
		}
	}
};
</script>
<style lang="stylus" scoped>
.crud-index {
    padding 10px
}
.order {
    height 100%
}
</style>
